<template>
  <div class="source-content">
    <div class="source-content-top">
      <div class="source-content-top-left">
        <titleView
          text="政务外网基本情况概览"
          :font-size="24"
          :bg-image="require('../../assets/image/yunziyuan.png')"
        />
        <div class="source-content-top-wrapper">
          <div
            v-for="item in 4"
            :key="item"
            :style="getCss(item)"
            class="source-content-top-wrapper-item"
          >
            <textAndCount
              :top-style="yunTop"
              :bottom-style="yunCss"
              top-text="66"
              bottom-text="云实例数"
              :top-bottom-font="true"
              :top-bottom-style="{
                color: '#2B4054',
                fontSize: '18.0px'
              }"
              bottom-unit="个"
            />
          </div>
        </div>
      </div>
      <div class="source-content-top-right">
        <titleView
          text="政务外网基本情况概览"
          :font-size="24"
          :bg-image="require('../../assets/image/yunziyuan.png')"
        />
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 400px;
          "
        >
          <CircleChart
            id="charte"
            width="700.0px"
            height="400.0px"
            max-width="700px"
          />
        </div>
      </div>
    </div>
    <div class="source-content-bottom">
      <div class="source-content-bottom-wrapper-left">
        <titleView
          text="政务外网安全态势"
          :font-size="24"
          :bg-image="require('../../assets/image/yunziyuan.png')"
        />
      </div>
      <div class="source-content-bottom-wrapper-right">
        <titleView text="日均外部攻击类型" :font-size="20" />
      </div>
    </div>
  </div>
</template>
<script>
import titleView from '@/components/title'
import textAndCount from '@/components/textAndCount'
import CircleChart from './components/circleChart.vue'

export default {
  components: { titleView, textAndCount, CircleChart },
  data() {
    return {
      yunCss: {
        fontSize: '18.0px',
        fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
        fontWeight: '400',
        color: '#2B4054'
      },
      yunTop: {
        fontSize: '30.0px',
        fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
        fontWeight: 'bold',
        color: '#2B4054'
      }
    }
  },
  methods: {
    getCss(index) {
      switch (index) {
        case 1:
          return {
            background:
              'linear-gradient(180deg,rgba(222, 246, 251, 0.6) 0%,rgba(222, 246, 251, 0) 100%)'
          }
        case 2:
          return {
            background:
              ' linear-gradient(180deg, rgba(253,199,72,0.15) 0%, rgba(222,246,251,0) 100%)'
          }
        case 3:
          return {
            background:
              ' linear-gradient(180deg, rgba(161,146,255,0.15) 0%, rgba(222,246,251,0) 100%)'
          }
        default:
          return {
            background:
              'linear-gradient(180deg, rgba(114,190,255,0.15) 0%, rgba(222,246,251,0) 100%)'
          }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.source-content {
  width: 1920px;
  height: 100%;
  margin: 0 auto;
  padding: 30px;
  .source-content-top {
    display: flex;
    justify-content: space-between;
    .source-content-top-left {
      width: 916px;
      height: 500px;
      background: #ffffff;
      border-radius: 16px 16px 16px 16px;
      padding: 20px;
      .source-content-top-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        margin-top: 29px;
        height: 380px;
        .source-content-top-wrapper-item {
          width: 380px;
          height: 180px;
          border-radius: 16px 16px 16px 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .source-content-top-right {
      width: 916px;
      height: 500px;
      background: #ffffff;
      border-radius: 16px 16px 16px 16px;
      padding: 20px;
    }
  }
  .source-content-bottom {
    width: 1861px;
    height: 410px;
    background: #ffffff;
    border-radius: 16px 16px 16px 16px;
    margin-top: 30px;
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
    .source-content-bottom-wrapper-left {
      width: 910px;
      height: 100%;
      background: #ffffff;
      border-radius: 16px 16px 16px 16px;
    }
    .source-content-bottom-wrapper-right {
      width: 880px;
      height: 100%;
      background: #ffffff;
      border-radius: 16px 16px 16px 16px;
    }
  }
}
</style>
